<template>
    <div   style="min-height: 90px;max-height: 90px">
        <el-row :gutter="20">
            <el-col :span="3">
            </el-col>
            <!--            图标栏-->
            <el-col :span="4">
                <!--                图标-->
                <div class="icon-menu" @click="localHome">
                    <img style="width: 50px;height: 50px" src="../../assets/img/dragon/047-chef.svg" alt=""/>
                </div>
                <!--                文字-->
                <div class="icon-menu" @click="localHome">
                    <a class="title">CODEBLOG</a>
                </div>
            </el-col>
            <!--            右菜单栏-->
            <el-col :span="14">
                <div v-if="user===null" class="menu-item" @click="changeItem(6)">
                    <router-link class="iconfont icon-wode " :class="currentItem===6? 'right-item-active':'right-item'"
                                 to="/login">登录
                    </router-link>
                </div>
                <div v-if="user!=null" class="menu-item" @click="changeItem(5)">
                    <el-dropdown trigger="click">
                        <el-avatar class="right-item" :src="user.avatar"></el-avatar>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <div style="height: 80px;width: 200px;background: #1daa99;border-radius: 15px;text-align: center">
                                        <p class="username">{{user.username}}</p>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item icon="el-icon-user" @click="$router.push('/userCenter')" >我的信息</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-document">我的文章</el-dropdown-item>
                                <el-dropdown-item @click="newBlog" icon="el-icon-plus" style="color: #1daa99">添加文章</el-dropdown-item>
                                <el-dropdown-item @click="logout" icon="el-icon-switch-button" style="color: #fd7286">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="menu-item" @click="changeItem(4)">
                    <router-link class="iconfont icon-tongzhi "
                                 :class="currentItem===4? 'right-item-active':'right-item'" to="/about">关于
                    </router-link>
                </div>
                <div class="menu-item" @click="changeItem(3)">
                    <router-link class="iconfont icon-rili" :class="currentItem===3? 'right-item-active':'right-item'"
                                 to="/tools">工具
                    </router-link>
                </div>
                <div class="menu-item" @click="changeItem(2)">
                    <router-link class="iconfont icon-mulu"
                                 :class="currentItem===2? 'right-item-active':'right-item'" to="/blog">博客
                    </router-link>
                </div>
                <div class="menu-item" @click="changeItem(1)">
                    <router-link class="iconfont icon-shouye "
                                 :class="currentItem===1? 'right-item-active':'right-item'" to="/home">首页
                    </router-link>
                </div>
                <div v-if="!searchShow" class="menu-item" @click="showSearch">
                    <i class="el-icon-search right-item"></i>
                </div>
                <div v-if="searchShow" class="menu-item">
                    <el-input
                        @blur="searchShow=false"
                        @click="searchAction"
                        ref="search"
                        style="width: 300px"
                        placeholder="请输入内容"
                        v-model="searchText"
                        suffix-icon="el-icon-search"
                    >
                    </el-input>
                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
    name: "DefaultHeader",
    data() {
        return {
            searchText: '',
            searchShow: false,
            currentItem: 0,
        }
    },
    computed: {
        user() {
            return this.$store.state.user
        }
    },
    components: {},
    methods: {
        /*跳转首页*/
        localHome() {
            this.currentItem = 0;
            this.$router.push("/")
        },
        changeItem(index) {
            if (index === 6){
                /*this.$store.state.user={
                    name:'tang'
                }*/
            }
            this.currentItem = index;
        },
        showSearch() {
            this.searchShow = true;
        },
        searchAction() {

        },
        logout(){
            localStorage.removeItem("auth")
            localStorage.removeItem('store');
            this.$store.dispatch("setUser",null)
            ElMessage.success({
                message: '退出登录成功',
                type: 'success'
            });
        },
        newBlog(){
            this.$router.push("/edit/0")
        }
    },
    created() {

    },
    mounted() {
    }
}

</script>

<style lang="scss" scoped>

.default-header {
    /*水平垂直居中*/
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) !important;
}

.title {
    font-size: 36px;
    font-weight: bold;
    font-family: 空心字体彩云, serif;
}

/*设置input*/
.el-input /deep/ .el-input__inner {
    border-radius: 30px !important;
}

.icon-menu {
    cursor: pointer;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) !important;
    float: left;
    margin: 0 auto;
}

.right-item {
    cursor: pointer;
    font-size: 20px;
    color: #ffffff;
    font-style: normal;
    font-family: 楷体, serif;
}

.right-item:hover {
    color: #fd7286;
}

.right-item-active {
    cursor: pointer;
    font-size: 20px;
    color: #1daa99;
    font-style: normal;
    font-family: 楷体, serif;
}

.right-item-active:hover {
    color: #116157;
}

.menu-item {
    /*水平垂直居中*/
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) !important;
    float: right;
    margin: 0 auto 0 30px;
}

a {
    text-decoration: none;
}
.username{
    left: 30px;

    font-size: 25px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}


</style>
